import { Button, Checkbox, Form, Input } from 'antd';
import React from 'react';

interface Props {
  isLogined: boolean,
  setIsLogined: () => void
}

export default ({ isLogined, setIsLogined }: Props) => {
  const onFinish = (values: any) => {
    setIsLogined();
  };

  const onFinishFailed = (errorInfo: any) => {
    setIsLogined();
  };

  return (
    
    <Form
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
      style={{fontSize:'32px'}}
    >
      <Form.Item
        label={isLogined ? "新密码" : "手机号"}
        name="username"
        rules={[{ required: true, message: isLogined ? '请输入新的密码' : '请输入手机号' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label= {isLogined ? "确认密码" : "密码"}
        name="password"
        rules={[{ required: true, message: isLogined ? '请再次输入新的密码' : '请输入密码' }]}
      >
        <Input.Password />
      </Form.Item>
      { !isLogined && (
        <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
          <Checkbox>记住我</Checkbox>
        </Form.Item>
      )}

      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        {!isLogined ? (
          <div style={{ display: 'flex', justifyContent: 'space-around' }}>
            <Button type="primary" htmlType="submit">
              登录
            </Button>
            
            <Button type="primary" htmlType="submit">
              注册
            </Button>
          </div>) : (
            <Button>确认修改密码</Button>
          )
        }
      </Form.Item>
    </Form>
  );
};
